<template>
  <div style="color: #666666">
    <!--搜索框-->
    <div class="pd-10">
      <el-input style="width: 300px" suffix-icon="el-icon-search" placeholder="请输入名称" class="mr-5" v-model="name" size="small"></el-input>
      <el-button class="ml-5" type="primary" @click="load" size="small">搜索</el-button>
      <el-button type="warning" @click="reset" size="small">重置</el-button>
    </div>
    <!--内容主体-->
    <div style="margin: 10px 0">
      <div style="padding: 10px 0;border-bottom: 1px dashed #eeeeee;" v-for="item in tableData" :key="item.id">
        <div class="pd-10" style="cursor: pointer;font-size: 20px;color: #3F5EF8" @click="$router.push('/front/articleDetail?id=' + item.id)">{{ item.name }}</div>
        <div style="font-size: 14px;margin-top: 10px;">
          <i class="el-icon-user-solid"></i>
          <span>{{ item.user }}</span>

          <i class="el-icon-time" style="margin-left: 20px"></i>
          <span>{{ item.time }}</span>
        </div>
      </div>
    </div>
    <!--分页-->
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
    <!--新增编辑弹出框-->
    <el-dialog title="文章信息" :visible.sync="dialogFormVisible" width="60%">
      <el-form :model="form" size="small">
        <el-form-item label="文章标题" label-width="80px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" label-width="80px">
          <mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <!--查看文章详情-->
    <el-dialog title="文章信息" :visible.sync="viewDialogFormVisible" width="60%">
      <el-card>
        <div>
          <mavon-editor
              class="md"
              :value="content"
              :subfield="false"
              :defaultOpen="'preview'"
              :toolbarsFlag="true"
              :editable="false"
              :scorllStyle="true"
              :ishljs="true" />
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Article",
  data() {
    return {
      tableData: [],
      name: "",
      form: {},
      teachers: [],
      dialogFormVisible: false,
      multipleSelection: [],
      //分页
      pageNum: 1,
      pageSize: 5,
      total: 0,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      viewDialogFormVisible: false,
      content: ""
    }
  },
  methods: {
    //markdown图片上传
    imgAdd(pos,$file) {
      //绑定@imgAdd event
      let $vm = this.$refs.md
      //第一步，将图片上传到服务器
      const formData = new FormData()
      formData.append('file',$file)
      axios({
        url: `http://${serverIp}:${serverPort}/file/upload`,
        method: 'post',
        data: formData,
        header: {'Content-Type':'multipart/form-data'},
      }).then(res => {
        //第二步，将返回的url替换到文本的原位置![...](./0) -> ![...](url)
        $vm.$img2Url(pos,res.data)
      })
    },
    //查看文章
    view(content) {
      this.content = content
      this.viewDialogFormVisible = true
    },
    load() {
      this.request.get("/article/page",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name
        }
      }).then(res => {
        console.log(res);
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    save() {
      this.request.post("/article/save",this.form).then(res => {
        if (res.code === "200") {
          this.dialogFormVisible = false
          this.form = {}
          this.$message.success("保存成功")
          this.load()
        }else {
          this.$message.error("保存失败")
        }
      })
    },
    del(id) {
      this.request.delete("/article/"+id).then(res => {
        if (res.code === "200") {
          this.$message.success("删除成功")
          this.load()
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    handleAdd() {
      this.dialogFormVisible = true
    },
    handleEdit(row) {
      this.form = Object.assign({},row)
      this.request.get("/user/role/ROLE_TEACHER").then(res => {
        if (res.code === "200") {
          this.teachers = res.data
        }else {
          this.$message.error("授课老师信息获取失败")
        }
      })
      this.dialogFormVisible = true
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id)
      this.request.post("/article/del/batch",ids).then(res => {
        if (res.code === "200") {
          this.$message.success("批量删除成功")
          this.load()
        }else {
          this.$message.error("批量删除失败")
        }
      })
    },
    reset() {
      this.name = ""
      this.load()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      this.load()
    },
    handleFileUploadSuccess(res) {
      console.log(res)
      this.load()
    },
    download(url) {
      window.open(url)
    },
    changeEnable(row) {
      this.request.post("/article/update",row).then(res => {
        if (res.code === "200") {
          this.$message.success("操作成功")
          this.load()
        }
      })
    }
  },
  created() {
    this.load()
  },
  watch: {
    dialogFormVisible() {
      if (this.dialogFormVisible === false) {
        this.form = {}
        console.log("执行了watch方法")
      }
    }
  }
}
</script>

<style scoped>

</style>